<template>
  <div class="coordination-container">
    <!-- 页面头部区域 -->
    <div class="coordination-header">
      <div class="header-content">
        <div class="ancient-title">部门间协调</div>
        <div class="header-subtitle">阴曹地府 · 跨部门事务协调管理</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">🤝</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <router-link to="/management/department-cooperation">
            <TeamOutlined />
            部门协作管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <ClusterOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 协调统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <FileDoneOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">协调案例</div>
              <div class="stat-value">{{ coordinationStats.totalCases }}</div>
              <div class="stat-label">本年累计</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <CheckCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">解决率</div>
              <div class="stat-value">{{ coordinationStats.resolutionRate }}%</div>
              <div class="stat-label">成功解决</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">处理中</div>
              <div class="stat-value">{{ coordinationStats.processingCases }}</div>
              <div class="stat-label">待解决</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <FieldTimeOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均用时</div>
              <div class="stat-value">{{ coordinationStats.avgResolutionTime }}</div>
              <div class="stat-label">天</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <a-row :gutter="24">
      <!-- 左侧：协调案例管理 -->
      <a-col :xs="24" :lg="16">
        <a-card title="协调案例管理" :bordered="false">
          <template #extra>
            <a-space>
              <a-button type="primary" @click="showCreateCaseModal">
                <PlusOutlined />
                新建协调
              </a-button>
              <a-button @click="exportCases">
                <ExportOutlined />
                导出数据
              </a-button>
            </a-space>
          </template>

          <!-- 筛选区域 -->
          <div class="filter-section">
            <a-row :gutter="16">
              <a-col :span="6">
                <a-select v-model:value="filterStatus" placeholder="状态筛选" style="width: 100%" allow-clear>
                  <a-select-option value="">全部状态</a-select-option>
                  <a-select-option value="pending">待处理</a-select-option>
                  <a-select-option value="processing">处理中</a-select-option>
                  <a-select-option value="resolved">已解决</a-select-option>
                  <a-select-option value="closed">已关闭</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterPriority" placeholder="优先级" style="width: 100%" allow-clear>
                  <a-select-option value="">全部优先级</a-select-option>
                  <a-select-option value="urgent">紧急</a-select-option>
                  <a-select-option value="high">高</a-select-option>
                  <a-select-option value="medium">中</a-select-option>
                  <a-select-option value="low">低</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-select v-model:value="filterType" placeholder="协调类型" style="width: 100%" allow-clear>
                  <a-select-option value="">全部类型</a-select-option>
                  <a-select-option value="conflict">冲突解决</a-select-option>
                  <a-select-option value="cooperation">业务协作</a-select-option>
                  <a-select-option value="resource">资源协调</a-select-option>
                  <a-select-option value="process">流程对接</a-select-option>
                </a-select>
              </a-col>
              <a-col :span="6">
                <a-input-search v-model:value="searchText" placeholder="搜索案例标题" @search="handleSearch" />
              </a-col>
            </a-row>
          </div>

          <!-- 协调案例列表 -->
          <div class="cases-list">
            <div v-for="case_ in filteredCases" :key="case_.id" class="case-item">
              <div class="case-header">
                <div class="case-title-section">
                  <h4 class="case-title">{{ case_.title }}</h4>
                  <div class="case-tags">
                    <a-tag :color="getStatusColor(case_.status)">{{ getStatusText(case_.status) }}</a-tag>
                    <a-tag :color="getPriorityColor(case_.priority)">{{ getPriorityText(case_.priority) }}</a-tag>
                    <a-tag color="blue">{{ getTypeText(case_.type) }}</a-tag>
                  </div>
                </div>
                <div class="case-actions">
                  <a-dropdown>
                    <a-button type="text">
                      <MoreOutlined />
                    </a-button>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item @click="viewCaseDetail(case_)">
                          <EyeOutlined />
                          查看详情
                        </a-menu-item>
                        <a-menu-item @click="updateCaseStatus(case_)">
                          <EditOutlined />
                          更新状态
                        </a-menu-item>
                        <a-menu-item @click="addComment(case_)">
                          <MessageOutlined />
                          添加备注
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item @click="closeCase(case_)" v-if="case_.status !== 'closed'">
                          <CloseOutlined />
                          关闭案例
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>

              <div class="case-content">
                <div class="case-description">{{ case_.description }}</div>
                <div class="case-departments">
                  <span class="label">涉及部门：</span>
                  <a-tag v-for="dept in case_.departments" :key="dept" color="cyan" size="small">
                    {{ getDepartmentName(dept) }}
                  </a-tag>
                </div>
              </div>

              <div class="case-progress">
                <div class="progress-info">
                  <span class="progress-label">处理进度</span>
                  <span class="progress-percentage">{{ case_.progress }}%</span>
                </div>
                <a-progress :percent="case_.progress" size="small" :show-info="false" />
              </div>

              <div class="case-meta">
                <div class="case-time"><span class="label">创建时间：</span>{{ case_.createTime }} <span class="label" style="margin-left: 16px">更新时间：</span>{{ case_.updateTime }}</div>
                <div class="case-coordinator"><span class="label">协调员：</span>{{ case_.coordinator }}</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <!-- 右侧：协调工具和统计 -->
      <a-col :xs="24" :lg="8">
        <a-space direction="vertical" size="large" style="width: 100%">
          <!-- 快速操作 -->
          <a-card title="快速操作" size="small" :bordered="false">
            <div class="quick-actions">
              <a-button block @click="emergencyCoordination" style="margin-bottom: 8px">
                <AlertOutlined />
                紧急协调
              </a-button>
              <a-button block @click="conflictMediation" style="margin-bottom: 8px">
                <TeamOutlined />
                冲突调解
              </a-button>
              <a-button block @click="resourceAllocation">
                <DeploymentUnitOutlined />
                资源协调
              </a-button>
            </div>
          </a-card>

          <!-- 部门协作网络 -->
          <a-card title="部门协作网络" size="small" :bordered="false">
            <div class="cooperation-network">
              <div v-for="relation in cooperationRelations" :key="relation.id" class="relation-item">
                <div class="relation-info">
                  <div class="departments">
                    <span class="dept-name">{{ getDepartmentName(relation.dept1) }}</span>
                    <ArrowRightOutlined class="relation-arrow" />
                    <span class="dept-name">{{ getDepartmentName(relation.dept2) }}</span>
                  </div>
                  <div class="relation-stats">
                    <span class="cooperation-count">{{ relation.cooperationCount }}次协作</span>
                    <span class="success-rate">成功率{{ relation.successRate }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 协调类型分布 -->
          <a-card title="协调类型分布" size="small" :bordered="false">
            <div class="type-distribution">
              <div v-for="type in typeDistribution" :key="type.type" class="type-item">
                <div class="type-info">
                  <span class="type-name">{{ type.name }}</span>
                  <span class="type-count">{{ type.count }}件</span>
                </div>
                <div class="type-progress">
                  <div class="progress-bar" :style="{ width: type.percentage + '%' }"></div>
                </div>
              </div>
            </div>
          </a-card>

          <!-- 最近活动 -->
          <a-card title="最近协调活动" size="small" :bordered="false">
            <div class="recent-activities">
              <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                <div class="activity-info">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
                <a-tag :color="activity.statusColor" size="small">{{ activity.status }}</a-tag>
              </div>
            </div>
          </a-card>
        </a-space>
      </a-col>
    </a-row>

    <!-- 新建协调案例弹窗 -->
    <a-modal v-model:open="createCaseModalVisible" title="新建协调案例" @ok="handleCreateCase" @cancel="handleCreateCaseCancel" width="700px">
      <a-form ref="caseFormRef" :model="caseForm" :rules="caseRules" layout="vertical">
        <a-form-item label="案例标题" name="title">
          <a-input v-model:value="caseForm.title" placeholder="请输入协调案例标题" />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="协调类型" name="type">
              <a-select v-model:value="caseForm.type" placeholder="选择协调类型">
                <a-select-option value="conflict">冲突解决</a-select-option>
                <a-select-option value="cooperation">业务协作</a-select-option>
                <a-select-option value="resource">资源协调</a-select-option>
                <a-select-option value="process">流程对接</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="优先级" name="priority">
              <a-select v-model:value="caseForm.priority" placeholder="选择优先级">
                <a-select-option value="urgent">紧急</a-select-option>
                <a-select-option value="high">高</a-select-option>
                <a-select-option value="medium">中</a-select-option>
                <a-select-option value="low">低</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="协调员" name="coordinator">
              <a-input v-model:value="caseForm.coordinator" placeholder="指定协调员" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="涉及部门" name="departments">
          <a-checkbox-group v-model:value="caseForm.departments">
            <a-row>
              <a-col :span="8" v-for="dept in allDepartments" :key="dept.id">
                <a-checkbox :value="dept.id">{{ dept.name }}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item label="案例描述" name="description">
          <a-textarea v-model:value="caseForm.description" placeholder="详细描述需要协调的问题和背景" :rows="4" />
        </a-form-item>

        <a-form-item label="预期目标" name="expectedOutcome">
          <a-textarea v-model:value="caseForm.expectedOutcome" placeholder="描述协调的预期结果和目标" :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  ApartmentOutlined,
  TeamOutlined,
  ClusterOutlined,
  FileDoneOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  FieldTimeOutlined,
  PlusOutlined,
  ExportOutlined,
  MoreOutlined,
  EyeOutlined,
  EditOutlined,
  MessageOutlined,
  CloseOutlined,
  AlertOutlined,
  DeploymentUnitOutlined,
  ArrowRightOutlined
} from '@ant-design/icons-vue'

// 响应式数据
const searchText = ref('')
const filterStatus = ref('')
const filterPriority = ref('')
const filterType = ref('')
const createCaseModalVisible = ref(false)
const caseFormRef = ref()

// 协调统计
const coordinationStats = reactive({
  totalCases: 156,
  resolutionRate: 94,
  processingCases: 23,
  avgResolutionTime: 3.5
})

// 部门数据
const allDepartments = ref([
  { id: 1, name: '第一殿秦广王府' },
  { id: 2, name: '第二殿楚江王府' },
  { id: 3, name: '第三殿宋帝王府' },
  { id: 4, name: '第四殿五官王府' },
  { id: 5, name: '第五殿阎罗王府' },
  { id: 6, name: '第六殿卞城王府' },
  { id: 7, name: '第七殿泰山王府' },
  { id: 8, name: '第八殿都市王府' },
  { id: 9, name: '第九殿平等王府' },
  { id: 10, name: '第十殿转轮王府' }
])

// 协调案例数据
const cases = ref([
  {
    id: 1,
    title: '第三殿与第九殿业务边界冲突',
    description: '在处理"忤逆不孝"案件时，存在管辖权重叠问题，需要明确业务边界',
    type: 'conflict',
    priority: 'high',
    status: 'processing',
    progress: 65,
    departments: [3, 9],
    coordinator: '阎罗王',
    createTime: '2023-11-01',
    updateTime: '2023-11-15',
    expectedOutcome: '明确两殿业务边界，建立有效的协作机制'
  },
  {
    id: 2,
    title: '轮回转世流程优化协调',
    description: '第十殿转轮王与各殿协调，优化轮回转世流程，提高处理效率',
    type: 'process',
    priority: 'medium',
    status: 'resolved',
    progress: 100,
    departments: [1, 5, 10],
    coordinator: '转轮王',
    createTime: '2023-10-15',
    updateTime: '2023-11-10',
    expectedOutcome: '建立标准化的转世流程，提高30%的处理效率'
  },
  {
    id: 3,
    title: '急案处理资源调配',
    description: '重大紧急案件处理时，各殿人力资源紧张，需要协调调配',
    type: 'resource',
    priority: 'urgent',
    status: 'pending',
    progress: 10,
    departments: [1, 2, 4, 5],
    coordinator: '秦广王',
    createTime: '2023-11-18',
    updateTime: '2023-11-18',
    expectedOutcome: '建立应急资源调配机制，确保急案及时处理'
  }
])

// 协作关系数据
const cooperationRelations = ref([
  { id: 1, dept1: 1, dept2: 10, cooperationCount: 156, successRate: 95 },
  { id: 2, dept1: 5, dept2: 9, cooperationCount: 89, successRate: 92 },
  { id: 3, dept1: 2, dept2: 3, cooperationCount: 67, successRate: 88 },
  { id: 4, dept1: 4, dept2: 6, cooperationCount: 45, successRate: 90 }
])

// 类型分布数据
const typeDistribution = ref([
  { type: 'conflict', name: '冲突解决', count: 45, percentage: 90 },
  { type: 'cooperation', name: '业务协作', count: 38, percentage: 76 },
  { type: 'resource', name: '资源协调', count: 28, percentage: 56 },
  { type: 'process', name: '流程对接', count: 45, percentage: 90 }
])

// 最近活动
const recentActivities = ref([
  { id: 1, title: '第三殿业务边界问题', time: '2小时前', status: '进行中', statusColor: 'blue' },
  { id: 2, title: '资源调配协调会议', time: '4小时前', status: '已完成', statusColor: 'green' },
  { id: 3, title: '流程优化讨论', time: '1天前', status: '待跟进', statusColor: 'orange' }
])

// 案例表单
const caseForm = reactive({
  title: '',
  type: '',
  priority: 'medium',
  coordinator: '',
  departments: [],
  description: '',
  expectedOutcome: ''
})

// 表单验证规则
const caseRules = {
  title: [{ required: true, message: '请输入案例标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择协调类型', trigger: 'change' }],
  coordinator: [{ required: true, message: '请指定协调员', trigger: 'blur' }],
  departments: [{ required: true, message: '请选择涉及部门', trigger: 'change' }],
  description: [{ required: true, message: '请输入案例描述', trigger: 'blur' }]
}

// 计算属性
const filteredCases = computed(() => {
  let result = cases.value

  if (filterStatus.value) {
    result = result.filter((case_) => case_.status === filterStatus.value)
  }

  if (filterPriority.value) {
    result = result.filter((case_) => case_.priority === filterPriority.value)
  }

  if (filterType.value) {
    result = result.filter((case_) => case_.type === filterType.value)
  }

  if (searchText.value) {
    result = result.filter((case_) => case_.title.toLowerCase().includes(searchText.value.toLowerCase()))
  }

  return result
})

// 方法
const getStatusColor = (status) => {
  const colors = {
    pending: 'orange',
    processing: 'blue',
    resolved: 'green',
    closed: 'gray'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return texts[status] || status
}

const getPriorityColor = (priority) => {
  const colors = {
    urgent: 'red',
    high: 'orange',
    medium: 'blue',
    low: 'green'
  }
  return colors[priority] || 'default'
}

const getPriorityText = (priority) => {
  const texts = {
    urgent: '紧急',
    high: '高',
    medium: '中',
    low: '低'
  }
  return texts[priority] || priority
}

const getTypeText = (type) => {
  const texts = {
    conflict: '冲突解决',
    cooperation: '业务协作',
    resource: '资源协调',
    process: '流程对接'
  }
  return texts[type] || type
}

const getDepartmentName = (deptId) => {
  const dept = allDepartments.value.find((d) => d.id === deptId)
  return dept ? dept.name : `第${deptId}殿`
}

const showCreateCaseModal = () => {
  Object.assign(caseForm, {
    title: '',
    type: '',
    priority: 'medium',
    coordinator: '',
    departments: [],
    description: '',
    expectedOutcome: ''
  })
  createCaseModalVisible.value = true
}

const handleCreateCase = async () => {
  try {
    await caseFormRef.value.validate()

    const newCase = {
      id: Date.now(),
      ...caseForm,
      status: 'pending',
      progress: 0,
      createTime: new Date().toISOString().split('T')[0],
      updateTime: new Date().toISOString().split('T')[0]
    }

    cases.value.push(newCase)
    message.success('协调案例创建成功')
    createCaseModalVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleCreateCaseCancel = () => {
  createCaseModalVisible.value = false
}

const viewCaseDetail = (case_) => {
  message.info(`查看案例详情: ${case_.title}`)
}

const updateCaseStatus = (case_) => {
  message.info(`更新案例状态: ${case_.title}`)
}

const addComment = (case_) => {
  message.info(`添加备注: ${case_.title}`)
}

const closeCase = (case_) => {
  case_.status = 'closed'
  case_.progress = 100
  case_.updateTime = new Date().toISOString().split('T')[0]
  message.success('案例已关闭')
}

const emergencyCoordination = () => {
  message.info('启动紧急协调程序')
}

const conflictMediation = () => {
  message.info('启动冲突调解程序')
}

const resourceAllocation = () => {
  message.info('启动资源协调程序')
}

const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}

const exportCases = () => {
  message.info('协调案例导出功能开发中...')
}

onMounted(() => {
  // 页面加载时的初始化逻辑
})
</script>

<style lang="scss" scoped>
.coordination-container {
  padding: 24px;

  // 页面头部
  .coordination-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 筛选区域
  .filter-section {
    margin-bottom: 20px;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 案例列表
  .cases-list {
    .case-item {
      margin-bottom: 16px;
      padding: 20px;
      border: 1px solid rgba(212, 153, 10, 0.2);
      border-radius: 8px;
      transition: all 0.3s ease;

      .case-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;

        .case-title-section {
          flex: 1;

          .case-title {
            margin: 0 0 8px 0;
            color: $primary-color;
            font-size: 18px;
            font-weight: bold;
          }

          .case-tags {
            .ant-tag {
              margin-right: 8px;
            }
          }
        }
      }

      .case-content {
        margin-bottom: 16px;

        .case-description {
          color: $text-primary;
          line-height: 1.6;
          margin-bottom: 12px;
        }

        .case-departments {
          .label {
            color: $text-secondary;
            margin-right: 8px;
          }

          .ant-tag {
            margin-right: 4px;
          }
        }
      }

      .case-progress {
        margin-bottom: 16px;

        .progress-info {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .progress-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .progress-percentage {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }

      .case-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: $text-secondary;
        font-size: 14px;

        .label {
          color: $text-secondary;
          margin-right: 4px;
        }
      }
    }
  }

  // 快速操作
  .quick-actions {
    .ant-btn {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
    }
  }

  // 协作网络
  .cooperation-network {
    .relation-item {
      margin-bottom: 12px;
      padding: 12px;
      background: rgba(212, 153, 10, 0.05);
      border-radius: 6px;

      .relation-info {
        .departments {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 8px;

          .dept-name {
            font-size: 12px;
            color: $primary-color;
          }

          .relation-arrow {
            color: $secondary-color;
          }
        }

        .relation-stats {
          display: flex;
          justify-content: space-between;
          font-size: 11px;
          color: $text-secondary;
        }
      }
    }
  }

  // 类型分布
  .type-distribution {
    .type-item {
      margin-bottom: 12px;

      .type-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        font-size: 14px;

        .type-name {
          color: $text-primary;
        }

        .type-count {
          color: $text-secondary;
        }
      }

      .type-progress {
        height: 6px;
        background: #f0f0f0;
        border-radius: 3px;
        overflow: hidden;

        .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, $secondary-color, #f0c674);
          transition: width 0.3s ease;
        }
      }
    }
  }

  // 最近活动
  .recent-activities {
    .activity-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid rgba(212, 153, 10, 0.1);

      &:last-child {
        border-bottom: none;
      }

      .activity-info {
        flex: 1;

        .activity-title {
          font-size: 14px;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .activity-time {
          font-size: 12px;
          color: $text-secondary;
        }
      }
    }
  }

  // Card样式覆盖
  :deep(.ant-card) {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(212, 153, 10, 0.2);
    border-radius: 12px;
  }

  :deep(.ant-card-head) {
    border-bottom: 1px solid rgba(212, 153, 10, 0.2);
  }
}
</style>
